<html>
<head>
    <title>Sub process Timeline List View</title>

    <!-- Include Ext stylesheets here: -->
	<link type="text/css" href="./resources/css/ext-all.css" rel="stylesheet" />        

    <!-- Include Ext and app-specific scripts: -->
	<script type="text/javascript" src="./adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="./ext-all-debug.js"></script>

	<!-- My files -->
    <link rel="stylesheet" type="text/css" href="styles2.css">

	<!-- EXAMPLE with data in external file -->
	<script src="./timelinedata/sptimelinelist.js" type="text/javascript"></script>
	<script type="text/javascript">
	Ext.onReady(function() {
		//alert(list);
		//alert(list[10])

		var myReader = new Ext.data.ArrayReader({}, [
			{name: 'id', type:'int'},
			{name: 'orgservice'},
			{name: 'businessfunction'},
			{name: 'businessprocess'},
			{name: 'subprocess'},
			{name: 'sptimeline'},
		]);

		var grid = new Ext.grid.GridPanel({
					/*
					store: new Ext.data.GroupingStore({
					            reader: myReader,
					            data: list,
					            sortInfo:{field: 'sptimeline', direction: "ASC"},
					            groupField:'businessprocess'
					}),*/					
					store: new Ext.data.Store({
						data: list,
						reader: myReader
					}),
					columns: [
						{header: 'ID', width: 10, sortable: true, dataIndex: 'id'},
						{header: 'Org Service', width: 90, sortable: true, dataIndex: 'orgservice'},
						{header: 'Business Function', width: 90, sortable: true, dataIndex: 'businessfunction'},
						{header: 'Business Process', width: 130, sortable: true, dataIndex: 'businessprocess'},
						{header: 'Sub Process', width: 140, sortable: true, dataIndex: 'subprocess'},
						{header: 'Timeline', width: 120, sortable: true, dataIndex: 'sptimeline'}
					],
					/*
					viewConfig: new Ext.grid.GroupingView({
					            forceFit:true,
					            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
					}),*/
					viewConfig: {
						forceFit: true
					},
					renderTo: 'content',
					title: 'Sub Process Timeline View',
					width: 1100,
					autoHeight: true,
					frame: false
				});

		grid.getSelectionModel().selectFirstRow();
	});	
	</script>

</head>
<body>
	<h1>Sub process Timeline List View</h1>

    <div id="content">
        
    	<h2>Business Process to Sub Processes Timeline List view</h2>
    	<p>A list description - O2BF2BP</p>
        
	</div>
</body>
</html>
